import React, { Component, createRef } from 'react'
import './today.scss'
import { Link } from 'react-router-dom'

class Com extends Component {
  render () {
    const ref1 = createRef() // 这里定义的ref2下面操作dom的时候也要进行用
    const ref2 = createRef()
    return (
      <div className='today_box'>
        {/* 授课部分 */}
        <div className='today_teaching'>
          <p className='today_teaching_p1'>高三年级语文</p>
          <p className='today_teaching_p2'>第三节(10:00-10:50)</p>
          <p className='today_teaching_p3'>高中部403教师</p>
          {/* 右边授课状态 */}
          <Link to='/curriculum/today/siginin'>
            <div className='today_teaching_shouke'>
              <p className='today_teaching_shouke_p'>
                <span className='today_teaching_shouke_p_span'>授课中</span>
                <img src="images/u97.png" alt="" />
              </p>
            </div>
          </Link>
          {/* <div className='today_teaching_shouke'>
            <p className='today_teaching_shouke_p'>
              <span className='today_teaching_shouke_p_span'>授课中</span>
              <img src="images/u97.png" alt="" />
            </p>
          </div> */}
          {/* 授课老师信息部分*/}
          <div className='today_teaching_message'>
            <img src="images/u58.png" alt="" />
            <span className='today_teaching_message_name'>刘小牛</span>
          </div>
        </div>
        {/* 几张几张背景图部分 */}
        <div className='today_box_img1'>
          <div className='today-teaching_img_top'>
            <img src="images/u54.png" alt="" />
          </div>
        </div>
        {/* 背景图右下角的那个部分 */}
        <div className='today_box_img2'>
          <div className='today_teaching_img_right'>
            <img src="images/u55.png" alt="" />
          </div>
        </div>

        {/* 下面课程准备部分 */}
        <div className='today_preparation' ref={ref1} onClick={() => {
          // 这里点击之后可以进行操作这个盒子的样式
          console.log(1)
          // console.log(ref2.current)
          const element = ref1.current
          console.log(element)
          ref1.current.style.height = '3.333333rem'
          const imgstyle1 = element.querySelector('.today_box_img1')
          const imgstyle2 = element.querySelector('.today_box_img2')
          imgstyle1.style.display = 'block'
          imgstyle2.style.display = 'block'
          // console.log(imgstyle)
        }}>
          <p className='today_teaching_p1'>高二年级语文</p>
          <p className='today_teaching_p2'>第四节(11:10-12:00)</p>
          <p className='today_teaching_p3'>高中部404教师</p>
          {/* 右边授课状态   并且点击的时候可以进行跳转路由*/}
          <Link to='/curriculum/today/readycourse'>
            <div className='today_teaching_shouke'>
              <p className='today_teaching_shouke_p today_teaching_shouke_p2'>
                <span className='today_teaching_shouke_p_span'>授课中</span>
                <img src="images/u97.png" alt="" />
              </p>
            </div>
          </Link>
          {/* 通过设置定位来确定这两个背景图的位置 */}
          <div className='today_box_img1'>
            <div className='today-teaching_img_top'>
              <img src="images/u54.png" alt="" />
            </div>
          </div>
          <div className='today_box_img2'>
            <div className='today_teaching_img_right'>
              <img src="images/u55.png" alt="" />
            </div>
          </div>
        </div>


        {/* 下面课程结束的部分 */}
        <div className='today_preparation' ref={ref2} onClick={() => {
          // 这里点击之后可以进行操作这个盒子的样式
          console.log(1)
          // console.log(ref2.current)
          const element = ref2.current
          console.log(element)
          ref2.current.style.height = '3.333333rem'
          const imgstyle1 = element.querySelector('.today_box_img1')
          const imgstyle2 = element.querySelector('.today_box_img2')
          imgstyle1.style.display = 'block'
          imgstyle2.style.display = 'block'
          // console.log(imgstyle)
        }}>
          <p className='today_teaching_p1'>高一年级语文</p>
          <p className='today_teaching_p2'>第一节(8:00-8:50)</p>
          <p className='today_teaching_p3'>高中部402教师</p>
          {/* 右边授课状态 */}
          <div className='today_teaching_shouke'>
            {/* <p className='today_teaching_shouke_p today_teaching_shouke_p2'>
              <span className='today_teaching_shouke_p_span'>授课中</span>
              <img src="images/u97.png" alt="" />
            </p> */}
            <div className='today_teaching_shouke_left'>
              <p className='today_teaching_shouke_left_p1'>课程结束</p>
              <p className='today_teaching_shouke_left_p2'>(27/29)</p>
            </div>
            <img className='images' src="images/u97.png" alt="" />
          </div>

          {/* 设置这个背景色的 */}
          <div className='today_box_img1'>
            <div className='today-teaching_img_top'>
              <img src="images/u54.png" alt="" />
            </div>
          </div>
          <div className='today_box_img2'>
            <div className='today_teaching_img_right'>
              <img src="images/u55.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Com